<template>
	<view class="demo">
		<nav-bar isBack title="产品包"></nav-bar>
		<!-- banner -->
		<view class="d_banner">
			<swiper class="swiper" autoplay interval="4200" duration="300" @change='bannerChange'>
				<swiper-item v-for="(item,index) in banner" :key="index">
					<view class="d_bItem">
						<image :src="item.img" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="d_bDots">
				<view v-for="(item, index) in banner" :key="index">
					<view class="d_bDot" :class="{'active': index == bannerIndex}">
						<view class="d_bIcon"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="d_content">
			<view class="index">
				<view class="i_data">
					<!-- <view class="i_dTabs" :style="{'top': (navHeight-2) + 'px'}"> -->
					<view class="i_dTabs">
						<view class="i_sen">
							<view class="i_dtTab" :class="{'active': tabType === 'kind'}" @tap="tabToggle('kind')">
								<view class="i_dtContain">
									<view class="i_dtCan omit-1" :class="{'active': tabVal_kind !== null}">
										<view class="i_dtIcon1"></view>
										<text>{{tabVal_kind === null ? "热门" : tabLabel_kind}}</text>
									</view>
								</view>
							</view>

							<view class="i_dtTab" :class="{'active': tabType === 'style'}" @tap="tabToggle('style')">
								<view class="i_dtContain">
									<view class="i_dtCan" :class="{'active': tabVal_style && tabVal_style.length}">
										<view class="i_dtIcon1"></view>
										<view class="i_dtIcon4" v-if="tabVal_style && tabVal_style.length">
											{{tabVal_style.length}}
										</view>
										<text>风格</text>
									</view>
								</view>
							</view>
							<view class="i_dtTab" :class="{'active': tabType === 'offer'}" @tap="tabToggle('offer')">
								<view class="i_dtContain">
									<view class="i_dtCan omit-1" :class="{'active': tabVal_offer !== null}">
										<view class="i_dtIcon1"></view>
										<text>{{tabVal_offer === null ? "户型" : tabLabel_offer}}</text>
									</view>
								</view>
							</view>
							<view class="i_dtTab" :class="{'active': tabType === 'price'}" @tap="tabToggle('price')">
								<view class="i_dtContain">
									<view class="i_dtCan" :class="{'active': tabVal_price !== null}">
										<view class="i_dtIcon2" :class="{'active': tabVal_price === 'all'}"></view>
										<view class="i_dtIcon3" :class="{'active': tabVal_price === '1'}"></view>
										<text>价格</text>
									</view>
								</view>
							</view>
						</view>
						<view class="i_mfixed">
							<!-- 筛选框 -->
							<view class="i_dSelect i_dSelect2" :class="{'active': tabShow}">
								<!-- <view class="i_dsBg" @tap="tabClose"></view> -->
								<!-- 热门: kind -->
								<view class="i_dsBox"
									:class="{'show': tabType === 'kind', 'hide': tabOldType === 'kind'}">
									<view class="i_dsList">
										<view v-for="item in tabList_kind" :key="item.value">
											<view class="i_dsItem" :class="{'active': tabVal_kind === item.value}"
												@tap="tabSelect('kind', item.value, item.label)">
												<view class="i_dsIcon iconfont icon-selected"></view>
												<text>{{item.label}}</text>
											</view>
										</view>
									</view>
								</view>
								<!-- 风格: style -->
								<view class="i_dsBox"
									:class="{'show': tabType === 'style', 'hide': tabOldType === 'style'}">
									<view class="i_dsTags">
										<view v-for="item in tabList_style" :key="item.value">
											<view class="i_dsTag" :class="{'active': item.select}"
												@tap="tabSelect('style', item.value)">
												<view class="i_dsTag-box">{{item.label}}</view>
											</view>
										</view>
									</view>
									<view class="i_dsBtns">
										<view class="i_dsReset" @tap="tabReset">重置</view>
										<view class="i_dsConfim" @tap="tabConfim">完成</view>
									</view>
								</view>
								<!-- 户型: offer -->
								<view class="i_dsBox"
									:class="{'show': tabType === 'offer', 'hide': tabOldType === 'offer'}">
									<view class="i_dsList"
										style="display: flex;align-items: center;flex-wrap: wrap;padding: 24rpx;">
										<view v-for="(item,index) in tabList_offer" :key="index"
											style="background: #f4f4f4;border-radius:30rpx;padding: 10rpx 20rpx;margin-left: 24rpx;margin-bottom: 24rpx;">
											<view class="i_dsItem" :class="{'active': tabVal_offer === item.value}"
												style="padding: 0;line-height: 1;height: auto;"
												@tap="tabSelect('offer', item.value, item.label)">
												<!-- <view class="i_dsIcon iconfont icon-selected"></view> -->
												<text>{{item.label}}</text>
											</view>
										</view>
									</view>
								</view>

								<!-- 价格: price -->
								<view class="i_dsBox"
									:class="{'show': tabType === 'price', 'hide': tabOldType === 'price'}">
									<view class="i_dsList">
										<view v-for="item in tabList_price" :key="item.value">
											<view class="i_dsItem" :class="{'active': tabVal_price === item.value}"
												@tap="tabSelect('price', item.value, item.label)">
												<view class="i_dsIcon iconfont icon-selected"></view>
												<text>{{item.label}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>
					<view class="i_dContain">
						<view class="i_dSelect" :class="{'active': tabShow}">
							<view class="i_dsBg" @tap="tabClose" v-if="tabShow && list.length>0"></view>
						</view>
						<template v-if="list.length>0">
							<view class="productlist" v-for="(item,index) in list" :key="index"
								@click="topage(item.pack_id)">
								<view class="img">
									<image :src="item.lead_img"></image>
								</view>
								<view class="protitle">
									{{item.name}}
									<!-- <view class="rightprice">{{item.price}}<text>元起</text></view> -->
								</view>
								<!-- -->
								<view class="protext" style="">
									<!-- {{item.title}} -->
									<view class="protextBg" style="">{{item.design_style}} | {{item.area}}m² |
										{{item.house_name}}
									</view>
									<view class="rightprice">{{item.price}}<text>元起</text></view>
									</view>
						</view>
						</template>
						<template v-else>
							<view class="productlist">
								<view style="height: 360rpx;">
								</view>
							</view>
						</template>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar"
	import service_product from '@/service/product.js'
	import service_value from '@/service/teamFilter.js'
	export default {
		data() {
			return {
				list: [],
				banner: [],
				// 轮播图
				bannerIndex: 0,
				bannerCurrent: 0,
				count: '',
				max: '',
				isLoading: !1,
				// tab栏=====
				tabType: null, // kind：热门  offer：户型  style：风格  price：价格   
				tabOldType: null,
				tabShow: false,
				tabEdit_style: false,
				// value
				tabVal_kind: null,
				tabVal_offer: null,
				tabVal_style: null,
				tabVal_price: null,
				// label
				tabLabel_kind: '',
				tabLabel_offer: '',
				// 筛选框筛选条件
				tabList_kind: [{
						value: 'all',
						label: '全部'
					},
					{
						value: '1',
						label: '热门'
					},
					// {
					// 	value: 'case',
					// 	label: '方案数冲高到低'
					// },
				],
				tabList_offer: [{
						value: 'all',
						label: '全部'
					},
					{
						value: '1',
						label: '一室'
					},
					{
						value: '2',
						label: '二室'
					},
					{
						value: '3',
						label: '三室'
					},
					{
						value: '4',
						label: '四室'
					},
					{
						value: '5',
						label: '五室'
					},
					{
						value: '6',
						label: '五室及以上'
					},
				],
				tabList_price: [{
						value: 'all',
						label: '全部'
					},
					{
						value: 'min',
						label: '价格从低到高'
					},
					{
						value: 'max',
						label: '价格从高到低'
					},
				],
				tabList_style: [],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '到底了'
				},
				page: 1,
				pagesize: 10,

			}
		},

		components: {
			navBar,
		},
		computed: {
			navHeight() {
				return this.$store.state.system.navBarHeight
			}, // Nav栏高度
			// tabList_style() {
			// 	return this.$store.state.teamFilter.filtrate_style
			// },
			// tabList_offer() {
			// 	return this.$store.state.teamFilter.filtrate_offer
			// },
		},
		onLoad(params) {
			this.$utils.getUrl()
			this.getlist()
			this.getbanner()
			this.getOptions()
		},
		onReachBottom() { //与methods 同级
			this.page++;
			this.status = 'loading';
			this.getlist();
		},
		methods: {
			// 获取筛选条件
			getOptions() {
				service_value.getOptions({
						// type: 25
					})
					.then(res => {
						console.log(res, '赛选条件')
						if (res.code == 1) {
							var resArr = res.data.design_style
							var newObj = {
								id: null,
								name: '全部'
							}
							resArr.unshift(newObj)
							resArr.forEach((item, index) => {
								// console.log(item);
								item.select = false
								item.value = item.id
								item.label = item.name
							})
							this.tabList_style = resArr
						}
					})
			},
			// 获取详情数据
			getlist() {
				let tabVal_style = this.tabVal_style
				let style = ''
				if (tabVal_style && tabVal_style.length && tabVal_style[0]) {
					style = tabVal_style.join(',')
				}
				let tabVal_kind = this.tabVal_kind
				// if (this.tabVal_kind == 0) {
				// 	tabVal_kind = ""
				// } else {
				// 	tabVal_kind = this.tabVal_kind
				// }
				// console.log(tabVal_kind);
				// 请求参数
				let params = {
					style_id: style,
					is_hot: tabVal_kind,
					floor: this.tabVal_offer,
					price: this.tabVal_price,
					page: this.page,
				}
				this.status = 'loading'
				service_product.getpackList(params)
					.then(res => {
						if (res.code == 1) {
							let data = res.data.data
							let pageNum=this.page*this.pagesize
							if(pageNum>=res.data.count){
								 this.status = 'nomore'
							}
							for (var i = 0; i < data.length; i++) {
								this.list.push(data[i]); // 加载的数据追加在上一页后面
							}
							this.count = data.count
							this.max = this.list.length
							this.isLoading = !1
							// this.page++
						}
					})
			},
			// 搜索=====
			searchData() {
				this.pageCurrent = 0
				this.isSearch = true
				this.list = []
				this.getlist()
			},

			// tab栏操作=======
			// 切换tab栏
			tabToggle(type) {
				if (type != this.tabType) {
					this.tabOldType = this.tabType
					this.tabType = type
					this.tabShow = true
				}
				// 点击同一tab => 关闭tab栏
				else {
					this.tabClose()
				}
			},

			// 关闭tab栏
			tabClose() {
				// 修改风格数据 => 关闭前保存
				if (this.tabEdit_style) {
					this.tabConfim()
				} else {
					this.tabOldType = null
					this.tabType = null
					this.tabShow = false
				}
			},

			// 选择tab
			tabSelect(type, value, label) {
				// console.log(type);
				// console.log(value);
				// console.log(label);
				if (type === 'style') {
					let tabList = this.tabList_style
					let disposeWay = value === null ? 'all' : 'it' // all: 选中全部选项 it: 选中其他选项
					let disposeAll = false
					let disposeIt = false

					for (let i = 0; i < tabList.length; i++) {
						// 选中全部选项 => 清空其他选项
						if (disposeWay === 'all') {
							if (tabList[i].value === null) {
								tabList[i].select = !tabList[i].select
							} else {
								tabList[i].select = false
							}
						}
						// 选中其他选项 => 取消全部选项选中状态
						else {
							if (tabList[i].value === null) {
								tabList[i].select = false
								disposeAll = true
							}
							if (tabList[i].value === value) {
								tabList[i].select = !tabList[i].select
								disposeIt = true
							}
							if (disposeAll && disposeIt) {
								break
							}
						}
					}

					// 修改了风格 => 关闭前保存数据
					this.tabEdit_style = true
				} else {
					this["tabVal_" + type] = value
					this["tabLabel_" + type] = label
					setTimeout(() => {
						this.searchData()
						this.tabClose()
					}, 500)
				}
			},

			// 重置风格
			tabReset() {
				let tabList = this.tabList_style

				for (let i = 0; i < tabList.length; i++) {
					tabList[i].select = false
				}

				// 修改了风格 => 关闭前保存数据
				this.tabEdit_style = true
			},
			// 确定风格
			tabConfim() {
				let tabList = this.tabList_style
				let select = []
				for (let i = 0; i < tabList.length; i++) {
					if (tabList[i].select) {
						select.push(tabList[i].value)
					}
				}
				this.tabVal_style = select.length ? select : null
				this.tabEdit_style = false
				// tabVal_offer
				// console.log(select);

				setTimeout(() => {
					this.searchData()
					this.tabClose()
				}, 500)
			},

			// 获取banner
			getbanner() {
				service_product.getbanner({
						type: 1
					})
					.then(res => {
						if (res.code == 1) {
							let data = res.data
							this.banner = data
						}
					})
			},
			// 轮播图
			bannerChange(e) {
				this.bannerIndex = e.detail.current
			},
			topage(id) {
				// uni.navigateTo({
				// 	url: '/pages_product/pages/product/detail/detail?pack_id=' + id,
				// });
				uni.navigateTo({
					url: '/pages_product/pages/product/newPackDetail/detail?pack_id=' + id,
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.demo {
		width: 100vw;
		height: 100vh;
		background: #fff;
		display: flex;
		flex-flow: column;

		// navBar=====
		.d_navBar {
			height: 0;
			position: relative;
			z-index: 500;
		}

		// banner=====
		.d_banner {
			height: 260rpx;
			background: #f0f0f0;
			position: relative;
			z-index: 1;

			.d_bItem {
				width: 100%;
				height: 100%;
				position: relative;
			}

			.d_bTag {
				height: 58rpx;
				line-height: 58rpx;
				color: #fff;
				font-size: 24rpx;
				padding: 0 24rpx;
				border-radius: 28rpx;
				background: rgba(51, 51, 51, .8);
				position: absolute;
				bottom: 78rpx;
				right: 36rpx;
			}

			.d_bDots {
				width: 100%;
				position: absolute;
				bottom: 10rpx;
				left: 0;
				display: flex;
				justify-content: center;
			}

			.d_bDot {
				width: 24rpx;
				height: 36rpx;

				&.active .d_bIcon {
					background: #ffd425;
				}

				.d_bIcon {
					width: 12rpx;
					height: 12rpx;
					margin: 12rpx auto 0;
					border-radius: 50%;
					background: rgba(255, 255, 255, .5);
				}
			}
		}

		// 内容=====
		.d_content {
			padding: 40rpx 0 40rpx 0;
			margin-top: -20rpx;
			border-radius: 20rpx;
			background: #fff;
			position: relative;
			z-index: 100;
			padding-top: 0;
			height: auto;

			.d_cTitle {
				min-height: 56rpx;
				line-height: 56rpx;
				font-size: 40rpx;
				font-weight: bold;
				padding: 0 32rpx;
			}

			.d_cInfo {
				min-height: 34rpx;
				line-height: 34rpx;
				color: #939393;
				font-size: 24rpx;
				padding: 0 36rpx;
				margin-top: 20rpx;
			}

			// 用户信息
			.d_cUser {
				height: 128rpx;
				margin: 60rpx 32rpx 0;
				border-radius: 64rpx;
				background: #f9f6f3;
			}

			.d_cuHeadimg {
				width: 88rpx;
				height: 88rpx;
				margin: 20rpx 16rpx 0 20rpx;
				border-radius: 50%;
				background: #f0f0f0;
				float: left;
				overflow: hidden;
			}

			.d_cuFocus {
				height: 128rpx;
				padding: 0 40rpx 0 28rpx;
				float: right;
			}

			.d_cuBtn {
				width: 136rpx;
				height: 48rpx;
				line-height: 48rpx;
				color: #fff;
				font-size: 20rpx;
				padding-left: 56rpx;
				margin-top: 40rpx;
				border-radius: 28rpx;
				background: #333;
				position: relative;
				box-sizing: border-box;

				&::before,
				&::after {
					content: "";
					width: 2rpx;
					height: 12rpx;
					border-radius: 4rpx;
					background: #fff;
					position: absolute;
					top: 50%;
					left: 36rpx;
					transform: translateY(-50%);
				}

				&::after {
					transform: translateY(-50%) rotate(90deg);
					transform-origin: 50% 50%;
				}
			}

			.d_cuCont {
				padding-top: 26rpx;
				overflow: hidden;
			}

			.d_cuName {
				height: 44rpx;
				line-height: 44rpx;
				font-size: 32rpx;
			}

			.d_cuFans {
				height: 34rpx;
				line-height: 34rpx;
				color: #939393;
				font-size: 24rpx;
			}

			// 富文本内容
			.d_ctTit {
				line-height: 50rpx;
				font-size: 36rpx;
				font-weight: bold;
				padding: 0 32rpx;
				margin-top: 60rpx;
			}

			.d_ctTxt {
				line-height: 44rpx;
				padding: 0 36rpx;
				margin-top: 28rpx;
			}

			.d_ctImg {
				height: 376rpx;
				margin: 28rpx 32rpx 0;
				border-radius: 8rpx;
				background: #f0f0f0;
				overflow: hidden;
			}

			.d_ctShop {
				height: 106rpx;
				line-height: 106rpx;
				font-weight: bold;
				padding: 0 64rpx 0 40rpx;
				margin: 28rpx 32rpx 0;
				border-radius: 10rpx;
				background: #f6f7fb;
				position: relative;
			}

			.d_ctShop-icon {
				width: 32rpx;
				height: 32rpx;
				margin-top: -16rpx;
				position: absolute;
				top: 50%;
				right: 30rpx;
			}

			.d_ctShop-txt {
				float: left;
			}

			.d_ctShop-imgs {
				overflow: hidden;
			}

			.d_ctShop-img {
				width: 66rpx;
				height: 66rpx;
				margin: 20rpx 0 0 28rpx;
				border-radius: 4rpx;
				background: #fff;
				overflow: hidden;
				float: left;
			}

			.d_cAuth {
				padding: 0 36rpx;
				margin-top: 80rpx;
			}

			.d_caTxt {
				line-height: 44rpx;
				color: #939393;
				font-size: 24rpx;
			}
		}

		// 评论=====
		.d_evaluate {
			padding: 40rpx 0;
			background: #fff;

			.d_eTitle {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 36rpx;
				font-weight: bold;
				padding-left: 36rpx;

				&>text {
					font-size: 24rpx;
					font-weight: bold;
					padding-left: 8rpx;
				}
			}

			.d_eList {
				padding-left: 32rpx;
			}

			.d_eItem {
				margin-top: 30rpx;

				&:nth-last-child(1) .p_eCont::after {
					content: none;
				}
			}

			.d_eHead,
			.d_eIts .d_eiHead {
				width: 66rpx;
				height: 66rpx;
				margin-right: 16rpx;
				border-radius: 50%;
				background: #f0f0f0;
				float: left;
			}

			.d_eCont {
				padding-bottom: 28rpx;
				position: relative;
				overflow: hidden;

				&::after {
					content: "";
					width: 100%;
					height: 1px;
					background: #f4f4f4;
					position: absolute;
					bottom: 0;
					left: 0;
					transform: scaleY(.5);
				}
			}

			.d_eName,
			.d_eIts .d_eiName {
				height: 28rpx;
				line-height: 28rpx;
				color: #939393;
				font-size: 20rpx;
			}

			.d_eAuth,
			.d_eIts .d_eiAuth {
				width: 64rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				color: #333;
				font-size: 20rpx;
				margin-left: 8rpx;
				border-radius: 28rpx;
				background: #f6f7fb;
				display: inline-block;
			}

			.d_eTxt,
			.d_eIts .d_eiTxt {
				min-height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				padding-right: 32rpx;
				margin-top: 4rpx;
			}

			.d_eTip,
			.d_eIts .d_eiTip {
				color: #939393;
				font-size: 20rpx;
				padding-left: 16rpx;
				display: inline-block;
			}

			// 他人回复
			.d_eiItem {
				margin-top: 16rpx;
			}

			.d_eiCont {
				overflow: hidden;
			}

			.d_eiReply {
				color: #939393;
				font-size: 20rpx;
				padding: 0 4rpx;
			}
		}

		// 评论框=====
		.d_talk {
			.d_tShim {
				height: 96rpx;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
			}

			.d_tBox {
				width: 100vw;
				height: 96rpx;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
				background: #fff;
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 101;
				box-shadow: 0 0 12rpx 0 rgba(155, 155, 155, .16);
			}

			.d_tFuns {
				padding-left: 30rpx;
				float: right;
			}

			.d_tFun {
				width: 110rpx;
				height: 96rpx;
				float: right;
			}

			.d_tIcon {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #6c6c6c;
				font-size: 40rpx;
				margin: 0 auto;
				padding-top: 14rpx;
				box-sizing: content-box;
			}

			.d_tTxt {
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				color: #939393;
				font-size: 20rpx;
			}

			.d_tInput {
				height: 60rpx;
				margin: 20rpx 0 0 32rpx;
				border-radius: 60rpx;
				overflow: hidden;

				&>input {
					width: 100%;
					height: 100%;
					font-size: 24rpx;
					padding: 0 28rpx;
					background: #f6f7fb;
				}
			}
		}

		// 浮窗按钮=====
		.d_fixed {
			position: fixed;
			right: 32rpx;
			bottom: 220rpx;
			z-index: 53;

			.d_fBtn {
				width: 108rpx;
				height: 108rpx;
				margin-top: 22rpx;
				border-radius: 50%;
				background: #fff;
				box-shadow: 0 0 20rpx #dedede;
				overflow: hidden;

				&:active {
					opacity: .92;
				}
			}

			.d_fcIcon {
				width: 40rpx;
				height: 40rpx;
				margin: 18rpx auto 0;
			}

			.d_fcTxt {
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				font-size: 24rpx;
			}
		}

		// 目录 
		.d_catalog {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1000;
			visibility: hidden;
			transition: visibility .3s;

			&.active {
				visibility: visible;

				.d_cBg {
					opacity: 1;
				}

				.d_cContain {
					transform: translateY(0);
				}
			}

			.d_cBg {
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, .6);
				opacity: 0;
				transition: opacity .3s;
			}

			.d_cContain {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				flex-flow: column;
				transition: transform .3s;
				transform: translateY(100%);
			}

			.d_cShade {
				height: 256rpx;
			}

			.d_cBox {
				border-radius: 24rpx 24rpx 0 0;
				background: #fff;
				position: relative;
				overflow: hidden;
				display: flex;
				flex-flow: column;
				flex: 1;
			}

			.d_cClose {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #333;
				font-size: 40rpx;
				padding: 16rpx;
				position: absolute;
				top: 30rpx;
				right: 16rpx;
				box-sizing: content-box;
			}

			.d_cTitle {
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-weight: bold;
				padding: 40rpx 0 30rpx;
				box-sizing: content-box;
			}

			.d_cList {
				overflow-y: auto;
				flex: 1;
			}

			.d_cItem {
				padding: 30rpx 0;
				position: relative;
			}

			.d_cArrow {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				color: #939393;
				font-size: 32rpx;
				position: absolute;
				top: 34rpx;
				right: 32rpx;
			}

			.d_cName {
				height: 40rpx;
				line-height: 40rpx;
				font-weight: bold;
				padding-left: 36rpx;
			}

			.d_cImgs {
				padding: 14rpx 0 0 32rpx;
				overflow: hidden;
			}

			.d_cImg {
				width: 220rpx;
				height: 220rpx;
				margin: 14rpx 14rpx 0 0;
				border-radius: 4rpx;
				background: #f0f0f0;
				float: left;
			}
		}
	}

	.productlist {
		position: relative;
		margin: 20rpx;
		// box-shadow: 4rpx 4rpx 10rpx 4rpx #eee;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.08);
		border-radius: 14rpx;
		background-color: #fff;
		padding-bottom: 20rpx;
		overflow: hidden;
	}

	.productlist .img {
		height: 360rpx;
		border-radius: 14rpx 14rpx 0 0;
		background: #eee;
	}

	.productlist .protitle {
		font-size: 32rpx;
		padding: 10rpx 20rpx;
		font-weight: bold;
		position: relative;
		padding-right: 220rpx;
	}

	.protextBg {
		padding: 8rpx 16rpx;
		background: linear-gradient(85deg, rgba(203, 175, 135, .2) 0%, rgba(203, 175, 135, 0) 100%);
		border-radius: 6rpx;
		width: max-content;
	}

	.rightprice {
		// display: inline-block;
		// position: absolute;
		// right: 20rpx;
		// top: 10;
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.rightprice text {
		font-size: 24rpx;
		font-weight: 400;
		margin-left: 6rpx;
	}

	.productlist .protext {
		// font-size: 30rpx;
		// padding: 0rpx 20rpx;
		// color: #CBAF87;
		// text-overflow: -o-ellipsis-lastline;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-line-clamp: 2;
		// line-clamp: 2;
		// -webkit-box-orient: vertical;
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	// 顶部搜索框=====
	.index .i_top {
		position: relative;
		z-index: 999;
		background: #fff;

		.i_tCan {
			width: 100%;
			height: 66rpx;
			// padding-left: 32rpx;
			padding-right: 24rpx;
		}

		.i_tBg {
			width: 100vw;
			height: 500rpx;
			background: linear-gradient(135deg, #2e333f 0%, #191d29 100%);
			position: fixed;
			top: 0;
			left: 0;
		}

		.i_tInput {
			height: 66rpx;
			border-radius: 34rpx;
			background: #F6F7FB;
			position: relative;
			opacity: .8;

			&>input {
				width: 100%;
				height: 100%;
				font-size: 24rpx;
				padding-left: 72rpx;
			}
		}

		.i_tIcon {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			color: #6c6c6c;
			font-size: 32rpx;
			position: absolute;
			top: 18rpx;
			left: 32rpx;
		}
	}

	.module {
		margin: 0 30rpx 24rpx 30rpx;
		box-sizing: border-box;

		.module_view {
			width: 100%;
			height: 124rpx;
			background: url(https://cos.ryz1620.com/liankun/static/builderteam/list_bg.png);
			background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding: 0 30rpx;
			background-size: 100% 100%;

			.module_title {
				margin-bottom: 10rpx;
				font-size: 32rpx;
				font-weight: 600;
			}

			.module_des {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #666;
				width: 100%;
			}
		}
	}

	// 内容=====
	.index .i_data {
		// min-height: 100vh;
		background: #fff;
		position: relative;
		z-index: 101;
		display: flex;
		flex-flow: column;
		flex: 1;
	}

	// tab栏==
	.index .i_data .i_dTabs {
		height: 114rpx;
		background: #fff;
		position: relative;
		position: sticky;
		top: 0;
		z-index: 200;
		box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.08);

		.i_dtTab {
			height: 114rpx;
			color: #939393;
			font-size: 24rpx;
			overflow: hidden;
			display: flex;
			flex: 1;

			.i_dtContain {
				width: 100%;
				height: 100%;
				padding-left: 8rpx;
				padding-right: 8rpx;
				overflow: hidden;
				display: flex;
				justify-content: center;
			}

			&:nth-child(1) .i_dtContain {
				padding-left: 36rpx;
				justify-content: flex-start;
			}

			&:nth-last-child(1) .i_dtContain {
				padding-right: 36rpx;
				justify-content: flex-end;
			}

			.i_dtCan {
				height: 114rpx;
				line-height: 114rpx;
				text-align: center;
				padding-right: 20rpx;
				position: relative;

				&.active {
					color: #a98f68;
				}
			}

			.i_dtIcon1,
			.i_dtIcon2,
			.i_dtIcon3 {
				width: 0;
				height: 0;
				border: 6rpx solid transparent;
				border-top-color: #6c6c6c;
				position: absolute;
				top: 50%;
				right: 0;
			}

			.i_dtIcon1 {
				top: 54rpx;
				transition: transform .3s;
				transform: rotate(0);
				transform-origin: 50% 25%;
			}

			.i_dtIcon2 {
				border-color: transparent;
				border-bottom-color: #ccc;
				top: 42rpx;

				&.active {
					border-bottom-color: #6c6c6c;
				}
			}

			.i_dtIcon3 {
				border-top-color: #ccc;
				top: 62rpx;

				&.active {
					border-top-color: #6c6c6c;
				}
			}

			.i_dtIcon4 {
				height: 24rpx;
				line-height: 24rpx;
				color: #fff;
				font-size: 20rpx;
				padding: 0 6rpx;
				margin: -12rpx 0 0 -12rpx;
				border-radius: 12rpx;
				background: #a98f68;
				position: absolute;
				top: 50%;
				left: 100%;
			}

			// tab选中效果
			&.active {
				color: #a98f68;

				.i_dtIcon1 {
					border-top-color: #a98f68;
					transform: rotate(180deg);
					transform-origin: 50% 25%;
				}
			}
		}
	}

	// 数据列表==
	.index .i_data .i_dContain {
		position: relative;
		overflow: hidden;
		flex: 1;
	}

	.index .i_data .i_dList {
		width: 100%;
		height: 100%;
		padding-left: 32rpx;
		background: #fff;

		.i_dItem {
			padding: 40rpx 0 24rpx;
			position: relative;
			border-bottom: 1px #f9f9f9 solid;

			&:nth-child(1) {
				padding-top: 20rpx
			}

			&::after {
				content: "";
				height: 1px;
				background: #f4f4f4;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 32rpx;
				transform: scaleY(.5);
			}

			&:nth-last-child(1)::after {
				content: none;
			}
		}

		.i_dHeadimg {
			width: 90rpx;
			height: 90rpx;
			margin-right: 16rpx;
			border-radius: 50%;
			background: #f0f0f0;
			overflow: hidden;
			float: left;
		}

		.i_dCont {
			overflow: hidden;
		}

		// 用户信息
		.i_dUser {
			.i_duFee {
				height: 44rpx;
				line-height: 44rpx;
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 10rpx;
				margin-right: 36rpx;
				float: right;
			}

			.i_duUnit {
				font-size: 20rpx;
				font-weight: normal;
				padding-left: 8rpx;
			}

			.i_duName {
				height: 40rpx;
				line-height: 40rpx;
				font-weight: bold;
				padding-left: 4rpx;
				margin-top: 8rpx;
			}

			.i_duRemark {
				height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				color: #939393;
				padding-left: 4rpx;
			}
		}

		// 标签
		.i_dTags {
			line-height: 0;
			padding: 10rpx 32rpx 12rpx 0;

			.i_dtTag {
				height: 36rpx;
				line-height: 36rpx;
				color: #a98f68;
				font-size: 20rpx;
				padding: 0 20rpx;
				margin-top: 6rpx;
				margin-right: 8rpx;
				border-radius: 18rpx;
				background: #f9f6f3;
				display: inline-block;
			}
		}

		// 媒体
		.i_dMedia {
			margin-top: 8rpx;

			.i_dmImgs {
				line-height: 0;
			}

			.i_dmImgs-item {
				width: 188rpx;
				height: 188rpx;
				margin-top: 8rpx;
				margin-right: 8rpx;
				border-radius: 4rpx;
				background: #f0f0f0;
				display: inline-block;
				overflow: hidden;
			}
		}

		// 关注
		.i_dInfo {
			overflow: hidden;

			.i_diFocus {
				height: 66rpx;
				color: #939393;
				font-size: 24rpx;
				padding: 0 36rpx;
				float: right;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			.i_diFocus-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 4rpx;
				display: inline-block;
			}
		}
	}

	// 筛选框==
	// 动画效果：
	// 画板，隐藏阶段，.4s后隐藏画板
	// 背景：以.4s时间，以opacity显示or隐藏
	// 弹窗：以.4s时间，【展示】：
	//     transform: translateY(-100%);
	//    【收起】：
	//     transform: translateY(0);
	.i_dSelect {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		visibility: hidden;
		transition: visibility .3s;

		&.active {
			visibility: visible;

			.i_dsBg {
				opacity: 1;
			}
		}

		// 背景
		.i_dsBg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .6);
			opacity: 0;
			transition: opacity .3s;
		}

		// 弹窗
		.i_dsBox {
			width: 100%;
			border-radius: 0 0 20rpx 20rpx;
			background: #fff;
			position: absolute;
			top: 0;
			left: 0;
			overflow: hidden;
			transform: translateY(-100%);
			transition: transform .3s;

			&.hide {
				transform: translateY(-100%);
			}

			&.show {
				transform: translateY(0);
			}
		}

		.i_dsList {
			padding: 14rpx 0 26rpx;
		}

		.i_dsItem {
			height: 62rpx;
			line-height: 62rpx;
			font-size: 24rpx;
			padding-left: 36rpx;
			position: relative;

			&.active {
				color: #a98f68;
			}

			&.active .i_dsIcon {
				display: block;
			}

			.i_dsIcon {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				color: #a58f6d;
				font-size: 32rpx;
				position: absolute;
				top: 14rpx;
				right: 32rpx;
				display: none;
			}
		}

		.i_dsTags {
			padding: 14rpx 22rpx;
			overflow: hidden;

			.i_dsTag {
				padding: 14rpx 10rpx;
				float: left;

				.i_dsTag-box {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					padding: 0 18rpx 0 20rpx;
					background: #f6f7fb;
					border-radius: 26rpx;
				}

				&.active .i_dsTag-box {
					color: #a98f68;
					background: #f9f6f3;
				}

				&:active .i_dsTag-box {
					opacity: .88;
				}
			}
		}

		.i_dsBtns {
			height: 88rpx;
			margin-top: 26rpx;
			display: flex;

			.i_dsReset,
			.i_dsConfim {
				height: 88rpx;
				font-size: 24rpx;
				background: #f6f7fb;
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;

				&:active {
					opacity: .88;
				}
			}

			.i_dsConfim {
				color: #fff;
				background: #a98f68;
			}
		}
	}

	.no-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx 20rpx 0 0;
		padding-top: 40rpx;
	}

	.no-title {
		padding: 30rpx 0;
	}

	.no-card>text {
		font-size: 24rpx;
		color: #999;
	}

	.no-bnt {
		padding: 10rpx 20rpx;
		margin: 20rpx;
		border: 2rpx solid #eee;
		font-size: 26rpx;
		background-color: #fff;
	}

	.no-card image {
		height: 240rpx;
		width: 240rpx;
		padding: 40rpx;
	}

	.yopcom {
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		background: #fff;
		border-top: 1px #fff solid;
		line-height: 90rpx;
		font-weight: 400;
		// color: #6C6C6C;

		.i_com {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			vertical-align: middle;
			font-size: 30rpx;

			text {
				font-size: 24rpx;
				margin-left: 4rpx;
			}
		}
	}

	.i_tSwiper {
		margin: 0 30rpx;
		height: 200rpx;
		position: relative;
	}

	.i_tDots {
		width: 100%;
		position: absolute;
		bottom: 8rpx;
		left: 0;
		display: flex;
		justify-content: center;
	}

	.i_tDot {
		width: 24rpx;
		height: 36rpx;

		&.active .i_tIcon {
			background: #ffd425;
		}

		.i_tIcon {
			width: 12rpx;
			height: 12rpx;
			margin: 12rpx auto 0;
			border-radius: 50%;
			background: rgba(255, 255, 255, .5);
		}
	}

	.i_tCont {
		height: 100%;
		border-radius: 10rpx;
		background: #f6f7fb;
		position: relative;
		overflow: hidden;
	}

	.i_tBtn {
		width: 102rpx;
		height: 102rpx;
		background: rgba(0, 0, 0, .4);
		border: 1px solid #fff;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.i_tbImg {
		width: 42rpx;
		height: 42rpx;
		margin: 20rpx auto 0;
	}

	.i_tbTxt {
		width: 100%;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		top: 58rpx;
		left: 0;
	}

	.i_sen {
		display: flex;
		justify-content: space-between;
	}

	.i_mfixed {
		position: relative;
		display: block;
		width: 100%;

		.i_dSelect2 {
			.i_dsBox {
				display: none;
			}

			.show {
				display: block;
			}
		}
	}
</style>
